import React, { FC } from 'react'
import { useTransition } from '@react-spring/web'
import { AnimatedContent } from './style'
interface IProps {
	show: boolean
}
export const SlideInOut: FC<IProps> = (props) => {
	const transitions = useTransition(props.show, {
		from: { left: '100%' },
		enter: { left: '0' },
		leave: { left: '100%' },
		config: {
			duration: 250,
		},
	})
	return transitions((style, item) =>
		item ? <AnimatedContent style={style}>{props.children}</AnimatedContent> : null
	)
}
